<template>
  <!-- 海运列表 -->
  <customContainer :config="config" />
  <div>
    <!-- 导入pod -->
    <el-dialog
      v-model="openPOD"
      title="上传"
      width="30%"
      :before-close="handleClose"
    >
      <el-upload class="upload-demo" drag multiple>
        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
        <div class="el-upload__text">将文件拖到此处，或 <em>点击上传</em></div>
        <template #tip>
          <div class="el-upload__tip">提示:仅允许导入"xls"或"xlsx"格式文件!</div>
        </template>
      </el-upload>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="openPOD = false">取消</el-button>
          <el-button type="primary" @click="openPOD = false">确定</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 批量导入 -->
    <el-dialog
      v-model="openBulkImport"
      title="导入订单"
      width="30%"
      :before-close="handleClose"
    >
      <el-upload class="upload-demo" drag multiple>
        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
        <div class="el-upload__text">将文件拖到此处，或 <em>点击上传</em></div>
        <template #tip>
          <div class="el-upload__tip">提示:仅允许导入"xls"或"xlsx"格式文件!</div>
        </template>
      </el-upload>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="openBulkImport = false">取消</el-button>
          <el-button type="primary" @click="openBulkImport = false">确定</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 批量修改价格 -->
    <el-dialog
      v-model="priceDialog"
      title="批量修改价格"
      width="30%"
      :before-close="handleClose"
    >
      <el-form ref="priceRef" :model="editPriceForm" label-width="80px">
        <el-form-item label="单价" prop="unitPrice">
          <el-input style="width: 175px;"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="openBulkImport = false">取消</el-button>
          <el-button type="primary" @click="openBulkImport = false">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import { reactive, markRaw, ref, computed } from 'vue'
import { Calendar, UploadFilled } from '@element-plus/icons-vue'
import { ElButton, ElMessageBox } from 'element-plus'

import { DictDirection } from '@/store/modules/dicts'

const editPriceForm = ref([])
const openPOD = ref(false)
const openBulkImport = ref(false)
const priceDialog = ref(false)
const handleClose = (done: () => void) => {
  ElMessageBox.confirm('确定取消?')
  .then(() => {
    done()
  })
  .catch(() => {
    // catch error
  })
}
const handleCabin = () => {}
const handleEdit = () => {}
const handleAddTotalOrder = () => {}
const handleDelete = () => {}
const handleInspection = () => {}
const handleDeclaration = () => {}
const handleDomestically = () => {}
const handleArrived = () => {}
const handleForeignInspection = () => {}
const customsClearance = () => {}
const handleCustomsClearance = () => {}
const handleCarryCabinet = () => {}
const handleUps = () => {}
const handleOverseas = () => {}
const handleExport1 = () => {}
const handleExportQG = () => {}
const handleExportPower = () => {}
const handleExportPowerSea = () => {}

const config = computed({
  get() {
    return {
    	query: {
        fields: [
          {
            label: '客户订单号',
            prop: 'customerNo',
            option: {
              placeholder: '请输入客户订单号',
              type: 'textarea',
            },
          },
          {
            label: '提单号',
            prop: 'ladingNo',
            option: {
              placeholder: '请输入提单号',
              type: 'textarea',
            },
          },
          {
            label: '服务商',
            prop: 'agent',
            option: {
              placeholder: '请输入系统订单号',
              dictInfo: { dict: DictDirection.服务商 },
            },
          },
          {
           
            label: '委托单位',
            prop: 'customerCode',
            option: {
              dictInfo: { dict: DictDirection.客户 },
            },
          },
          {
            label: '航次/航班号',
            prop: 'flightNumber',
            option: {
              placeholder: '请输入航次/航班号',
             
            },
          },
          {
            label: '起运港',
            prop: 'portOfDeparture',
            option: {
              placeholder: '请输入起运港',
             
            },
          },
          {
            label: '目的港',
            prop: 'portOfDestination',
            option: {
              placeholder: '请输入目的港',
             
            },
          },
          
          {
            type: 'date-picker',
            label: '起飞时间',
            prop: 'datePicker',
            option: {
              type: 'date',
            },
          },
          {
            type: 'select',
            label: '航空公司',
            prop: 'airlineCompany',
            option: {
              dictInfo: { dict: DictDirection.包裹状态 },
            },
          },
          {
            type: 'select',
            label: '订单状态',
            prop: 'splittingStatus',
            option: {
              dictInfo: { dict: DictDirection.包裹状态 },
            },
          },
      
        ],
        queryParams: {
          pageSize: 10,
          pageNum: 1,
          clientId: undefined,
          orderNo: undefined,
          waybillNo: undefined,
          mainTransferOrderNo: undefined,
          transportType: 3,
          productType: undefined,
          customerCode: undefined,
          areaCode: undefined,
          receivingSite: undefined,
          marketProducts: undefined,
          goodsType: undefined,
          isPod: undefined,
          businessManager: undefined,
          consigneeCountry: undefined,
          consigneePostcode: undefined,
          splittingStatus: undefined,
          maker: undefined,
          tagNumber: undefined,
          dataSources: undefined,
          pickingStatus: undefined,
        },
        formOption: {},
      },
      btns: [
        {
          title: '配舱',
          type: 'primary',
          onClick: handleCabin,
        },

        {
          title: '修改',
          type: 'primary',
          onClick: handleEdit,
        },

        {
          title: '签出',
          type: 'info',
          onClick: handleAddTotalOrder,
        },

        {
          title: '删除',
          type: 'warning',
          onClick: handleDelete,
        },
        {
          title: '国内查验',
          type: 'success',
          onClick: handleInspection,
		
        },
        {
          title: '国内报关',
          type: 'danger',
          onClick: handleDeclaration,
        },

        {
          title: '国内已放行',
          type: 'info',
          onClick: handleDomestically,
		
        },

        {
          title: '已到港',
          type: 'primary',
          text:true,
          onClick: handleArrived,
        },
    	{
          title: '国外查验',
          type: 'primary',
          onClick: handleForeignInspection,
        },

        {
          title: '国外清关',
          type: 'primary',
          onClick: customsClearance,
        },
        {
          title: '国外清关已放行',
          type: 'info',
          onClick: handleCustomsClearance,
        },

        {
          title: '已提柜',
          type: 'warning',
          onClick: handleCarryCabinet,
        },
        {
          title: '提重柜',
          type: 'success',
          onClick: handleUps,
		
        },
        {
          title: '还空柜',
          type: 'danger',
          onClick: handleOverseas,
        },

        {
          title: '导出',
          type: 'info',
          onClick: handleExport1,
		
        },

        {
          title: '导出空派清关资料',
          type: 'primary',
          text:true,
          onClick: handleExportQG,
        },
        {
          title: '空运导出委托书',
          type: 'danger',
          onClick: handleExportPower,
        },

        {
          title: '海运导出委托书',
          type: 'info',
          onClick: handleExportPowerSea,
		
        },
      ],
      table: {
        columns: [
          { type: 'selection', width: '55', align: 'center' },
          { label: '提单号', width: '125', align: 'center', prop: 'ladingNo' },
          { label: '报价编号', align: 'center', width: '100', prop: 'quotationNo' },
          { label: '委托单位', align: 'center', width: '100', prop: 'customerName' },
          { label: '客户单号', width: '120', align: 'center', prop: 'customerNo' },
          { label: '贸易条款', align: 'center', prop: 'tradeTerms' },
          { label: '服务类型', width: '100', align: 'center', prop: 'serviceType' },
          { label: '服务商简称', align: 'center', width: '150', prop: 'agent' },
          { label: '服务渠道', align: 'center', width: '150', prop: 'serviceChannelCode' },
          { label: '状态', align: 'center', prop: 'splittingStatus', width: '120' },
          { label: '运输类型', align: 'center', prop: 'transportType', width: '120' },
          { label: '订舱管理', align: 'center', prop: 'bookingManagement', width: '180' },
          { label: '国外代理', align: 'center', width: '100', prop: 'foreignAgent' },
          { label: '航空公司', align: 'center', prop: 'airlineCompany' },
          { label: '货值', align: 'center', prop: 'valueGoods', width: '100' },
          { label: 'classNo号', width: '100', align: 'center', prop: 'classno' },
          { label: '起飞时间', width: '120', align: 'center', prop: 'departureTime' },
          { label: '预计排仓时间', width: '120', align: 'center', prop: 'estimatedArrangementTime' },
          { label: '起运港', align: 'center', prop: 'portOfDeparture' },
          { label: '目的港', align: 'center', width: '120', prop: 'portOfDestination' },
          { label: '卸货港', align: 'center', width: '120', prop: 'portOfDischarge' },
          { label: '中转港代码', align: 'center', prop: 'transitPortCode', width: '120' },
          { label: '主单号', align: 'center', prop: 'masterOrderNo', width: '120' },
          { label: '分单号', align: 'center', prop: 'subOrderNo', width: '120' },
          { label: '航班号', align: 'center', prop: 'flightNumber', width: '120' },
          { label: 'ETD', align: 'center', prop: 'etd', width: '120' },
          { label: '截单时间', align: 'center', prop: 'cutOffTime', width: '120' },
          { label: '发货人', align: 'center', prop: 'consignor', width: '120' },
          { label: '收货人', align: 'center', prop: 'consignee', width: '120' },
          { label: '通知人1', align: 'center', prop: 'notifier1', width: '120' },
          { label: '通知人2', align: 'center', prop: 'notifier2', width: '120' },
          { label: '唛头', align: 'center', prop: 'shippingMark', width: '120' },
          { label: '英文品名', align: 'center', prop: 'englishName', width: '120' },
          { label: '付款方式', align: 'center', prop: 'paymentMethod', width: '120' },
          { label: '运输条款', align: 'center', prop: 'transportClause', width: '120' },
          { label: '提单形式', align: 'center', prop: 'ladingForm', width: '120' },
          { label: '总件数', align: 'center', prop: 'receivingTotal', width: '120' },
          { label: '总实重', align: 'center', prop: 'receivingTotalWeight', width: '120' },
          { label: '总材积重', align: 'center', prop: 'receivingTotalWood', width: '120' },
          { label: '总体积重', align: 'center', prop: 'volumeWeightTotal', width: '120' },
          { label: '总计费重', align: 'center', prop: 'receivingTotalCharging', width: '120' },
          { label: '订舱备注', align: 'center', prop: 'bookingRemarks', width: '120' },
          { label: '配舱备注', align: 'center', prop: 'cabinRemarks', width: '120' },
          { label: '操作备注', align: 'center', prop: 'operationRemarks', width: '120' },
          { label: '创建人', align: 'center', prop: 'createUser', width: '120' },
          { label: '创建时间', align: 'center', prop: 'createDate', width: '120' },
          { label: '业务员', align: 'center', prop: 'salesman', width: '120' },
          { label: '客服员', align: 'center', prop: 'customerServiceStaff', width: '120' },
          {
            label: '操作',
            width: '200px',
            fixed: 'right',
            align: 'center',
            render(h, params) {
              return h(
                ElButton,
                {
                  text: true,
                  type: 'primary',
                  onClick: () => {
                    console.log(params)
                  },
                },
                {
                  default: () => '操作',
                },
              )
            },
          },
        ],
        event: {
          onRowClick(e) {
            console.log(e)
          },
        },
      },
      api: '',
      customKey: 'express/mainBusiness/airSeaManage/air.vue',
    }
  },
  set(val) {
    return val
  },
  // customKey: 'express-orderInfo',
})
</script>
<style lang="less" scoped>
/deep/.is-guttered {
  padding: 5px;
}
</style>
